<script setup>
import ItemPage from '@/components/ItemPage.vue'
import { inject, onMounted, ref } from 'vue'
const itemOne = ref(null)
const echarts = inject('echarts')
// 数据获取赋值
const axios = inject('axios')
const dataList = ref([])
async function fetchData() {
  const response = await axios.get('/api/chartOne/data')
  // console.log(response.data.data.chartData)
  dataList.value = response.data.data.chartData
}
const yData = ref([])
const xData = ref([])
let myChart
onMounted(() => {
  myChart = echarts.init(itemOne.value.$el)
})
//获取数据渲染dom
fetchData().then(() => {
  yData.value = dataList.value.map((item) => item.title)
  xData.value = dataList.value.map((item) => item.num)
  // console.log(yData.value, xData.value)
  let option = {
    title: {
      text: '销售总量',
      textStyle: {
        color: '#fff',
        fontSize: 20
      }
    },
    // 坐标系设置，设置容器与这个dom的边距等
    grid: {
      top: '20%',
      left: '7%',
      right: '10%',
      bottom: '15%'
      // show: true
    },
    // 图例设置
    tooltip: {},
    xAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: {
      type: 'category',
      data: yData.value,
      // 坐标刻度标签样式
      axisLabel: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '销售总量',
        type: 'bar',
        data: xData.value,
        itemStyle: {
          // 柱子样式
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 0, color: '#3370a1' },
              { offset: 1, color: '#c3a33f' }
            ]
          },
          borderRadius: [0, 5, 5, 0]
        },
        label: {
          // 柱子标签
          show: true,
          color: '#fff',
          position: 'right',
          fontSize: 10
        },
        // 控制动画
        animation: true
      }
    ]
  }
  myChart.setOption(option)
})
window.addEventListener('resize', () => {
  myChart.resize()
})
</script>
<template>
  <ItemPage ref="itemOne"></ItemPage>
</template>
<style lang="scss" scoped></style>
